<template>
    <div class="detail">
        <detail-nav-bar class="detail-nav"/>
        <scroll class="content" ref="scroll" >
            <detail-swiper :top-images="topImages" />
            <detail-base-info :goods="goods" />
            <detail-shop-info :shop="shop" />
            <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad" />
            <detail-param-info :param-info="paramInfo" />
            <detail-comment-info :comment-info="commentInfo" />
            <goods-list :goods="recommends" />
        </scroll>
    </div>
</template>

<script>
    import DetailNavBar from './childComps/DetailNavBar'
    import DetailSwiper from './childComps/DetailSwiper'
    import DetailBaseInfo from './childComps/DetailBaseInfo'
    import DetailShopInfo from './childComps/DetailShopInfo'
    import DetailGoodsInfo from './childComps/DetailGoodsInfo'
    import DetailParamInfo from './childComps/DetailParamInfo'
    import DetailCommentInfo from './childComps/DetailCommentInfo'

    import Scroll from 'components/common/scroll/Scroll'
    import GoodsList from 'components/content/goods/GoodsList'
    

    import {getDetail, Goods, Shop, GoodsParam, getRecommend} from 'network/detail'

    export default {
        name: 'Detail',
        components: {
            DetailNavBar,
            DetailSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            Scroll,
            DetailGoodsInfo,
            DetailParamInfo,
            DetailCommentInfo,
            GoodsList
        },
        data() {
            return {
                iid: null,
                topImages: [],
                goods: {},
                shop: {},
                detailInfo: {},
                paramInfo: {},
                commentInfo: {},
                recommends: []
            }
        },
        created() {
            //  1.保存传入的iid
            this.iid = this.$route.params.iid;

            //  2.根据iid请求详情页数据
            getDetail(this.iid).then(res => {
                console.log(res)

                const data = res.result;
                //  2.1.获取顶部的图片轮播数据
                this.topImages = data.itemInfo.topImages;
                //  2.2.获取商品信息
                this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services);
                //  2.3.创建店铺信息的对象
                this.shop = new Shop(data.shopInfo)
                //  2.4.保存商品的详情数据
                this.detailInfo = data.detailInfo;
                //  2.5.获取参数的信息
                this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);
                //  2.6.取出评论信息
                if (data.rate.cRate !== 0) {
                    this.commentInfo = data.rate.list[0];
                }
                 
            })

            //  3.请求推荐数据
            getRecommend().then(res => {
                console.log(res)
                this.recommends = res.data.list;
            })
        
        },
        methods: {
            imageLoad() {
                this.$refs.scroll.refresh()
            }
        }
    }
</script>

<style scoped>
    #detail {
        height: 100vh;
        position: relative;
        z-index: 1;
        background-color: #fff;
    }
   .detail-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9; 
        background-color: #fff;
    }

    .content {
        position: absolute;
        top: 44px;
        bottom: 60px;
    }

    /* .detail {
        position: relative;
        z-index: 9;
        background-color: #fff;
        height: 100vh;
    }

    .detail-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9; 
        background-color: #fff;
    }

    .content2 {
        height: calc(100% - 44px);
        overflow: hidden;
        background-color: #fff;

        position: absolute;
        top: 44px;
        bottom: 60px;

    } */
    /* .content {
        position: absolute;
        top: 44px;
        bottom: 60px;
    } */
</style>